<template>
  <div :style="{ width: `${width}px`, height:`${height}px` }" :id="id"></div>
</template>

<script>
import G2 from '@antv/G2'

export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    charData: {
      type: Array,
      default: function () {
        return []
      }
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    id: String
  },
  mounted () {
    this.drawChart(this.charData)
  },
  watch: {
    charData (val, oldVal) {
      this.drawChart(val)
    }
  },
  methods: {
    drawChart (datas) {
      this.chart && this.chart.destroy()
      // 创建对象
      this.chart = new G2.Chart({
        id: this.id, // 指定容器id
        width: 1000, // 指定图表宽度
        height: 250// 指定图表高度
      })
      // 载入数据源
      this.chart.source(datas, {
        strftime: {
          alias: '日期',
          type: 'cat',
          range: [0, 1]
        },
        value: {
          alias: '数量值(人)'
        }
      })
      this.chart.line().position('strftime*value').size(2)
      this.chart.point().position('strftime*value').color('#757373')
        .shape('circle')
        .label('value', { offset: 20, label: { fill: '#000' } })
      this.chart.animate(false)
      this.chart.render()// 渲染数据
    }
  }
}
</script>
